import React, {Component}      from 'react';
import {
    StyleSheet,
    View,
    ListView,
    Dimensions,
    Text,
    Image,
    ScrollView,
    TouchableOpacity
}from 'react-native';
import BaseNavigationBar          from '../../views/BaseNavigationBar';
import Beans                      from '../../utils/Beans';
import Swiper                     from 'react-native-swiper';

const {width,height} = Dimensions.get('window');

export default class BeansScreen extends Component {

    constructor(props){
        super(props);
        this.state = {
            noData:'',
            dataSource : new ListView.DataSource(
                { rowHasChanged: (r1, r2) => r1.uuid !== r2.uuid }),
        };
    }

    componentDidMount() {
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(Beans.data)
        });
    }

    onPress(banner) {
        // this.props.navigation.navigate("BannerDetail")
    }

    popToBack(){
        this.props.navigation.goBack()
    }

    renderHeaderView(){
        var bannerList = [
            'http://img1.3lian.com/2015/w7/98/d/22.jpg',
            'http://img1.3lian.com/2015/w7/98/d/22.jpg',
            'http://img1.3lian.com/2015/w7/98/d/22.jpg'
        ];
        return (
            <View>
                <View style={{justifyContent:'center',alignItems:'center',backgroundColor:'#ff4114',height:0.56*220}}>
                <Text style = {{fontSize:16,marginLeft:0.56*20,textAlign:'center',marginTop:0.56*39,color:'#fefcfc',}}>
                    荷豆剩余(个)</Text>
                <Text style = {{fontSize:45,marginLeft:0.56*20,textAlign:'center',marginTop:0.56*20,color:'#fefcfc',}}>
                    5000</Text>
                </View>
                <View style={{width:width, height:0.56*10,backgroundColor:'#ffffff'}}/>
                <Swiper
                    horizontal={true}
                    height={100}
                    loop={true}
                    autoplay={true}
                    paginationStyle={{bottom:10}}
                    dot={<View style={styles.customDot} />}
                    activeDot={<View style={styles.customActiveDot} />}

                >
                    {
                        bannerList.map((banner,i) => {
                            return (
                                <TouchableOpacity key={i} activeOpacity={1}
                                    // onPress={() => this.onPress(banner)}
                                >
                                    <Image
                                        style={styles.bannerImage}
                                        source={{url:banner}}
                                    />
                                </TouchableOpacity>
                            )
                        })
                    }
                </Swiper>
            </View>
        )
    }

    renderFooterView(){
        return (
            <View style={{width: width, height:0.56*40}}/>
        )
    }

    renderRow(rowData){
        return (
            <View style = {styles.cellViewStyle}>
                <View style = {{flexDirection:'row',alignItems:'center',width:width-20,
                    backgroundColor:'white',height:width/4,marginLeft:10}}>
                    <Image
                        style={{width:0.56*174,height:.56*164}}
                        source={{url:rowData.image}}
                    />
                    <View style = {{flexDirection:'column'}}>
                        <Text style = {{fontSize:13,marginLeft:0.56*20,textAlign:'left',marginTop:0.56*28,color:'#333333',}}>
                            {rowData.title}</Text>
                        <Text style = {{fontSize:13,marginLeft:0.56*20,textAlign:'left',marginTop:0.56*26,color:'#ff4517',}}>
                            {rowData.count}</Text>
                        <Text style = {{fontSize:11,marginLeft:0.56*20,textAlign:'left',marginTop:.56*22,color:'#909090'}}>
                            {rowData.number}</Text>
                    </View>
                </View>
            </View>
        )
    }

    // 明细
    goBeansScreen(){
        this.props.navigation.navigate("BeansDetail")
    }

    render() {
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}
                    title={'荷豆'}
                    rightItemTitle={'明细'}
                    rightItemFunc={()=>this.goBeansScreen()}
                />
                <ScrollView>

                  <ListView
                    showsVerticalScrollIndicator={false}
                    dataSource={this.state.dataSource}
                    renderHeader={this.renderHeaderView}
                    renderRow={this.renderRow}
                    renderFooter={this.renderFooterView}
                  />
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    cellViewStyle:{
        backgroundColor:'red',
        height:80,
        justifyContent:'center',
        alignItems:'center',
        marginTop:10,

    },
    // TODO: banner setting
    customDot: {
        backgroundColor: '#ccc',
        height:6,
        width: 6,
        marginLeft: 2,
        marginRight: 2,
        marginTop:200,
        borderRadius: 3,
    },
    customActiveDot: {
        backgroundColor: 'white',
        height: 6,
        width: 6,
        marginLeft: 2,
        marginRight: 2,
        marginTop: 200,
        borderRadius: 3,
    },
    bannerImage: {
        height:100,
        width:width,
    },
});
